<template>
  <div class="container">
    <div class="title">企业基本信息</div>
    <el-divider />
    <div class="m-form-box">
      <el-button type="primary" size="medium" class="edit-btn" @click="status = false" v-if="status">编辑</el-button>
      <div class="m-form">
        <el-form ref="form" :model="form" label-width="130px" style="width: 100%;" :class="{ 'form-disabled': status }">
          <el-form-item label="企业名称"><el-input v-model="form.companyName" placeholder="无" style="width: 100%;" clearable size="small" :readonly="status" /></el-form-item>
          <el-form-item label="统一社会信用代码">
            <el-input v-model="form.creditCode" placeholder="无" style="width: 100%;" clearable size="small" :readonly="isEdit" />
          </el-form-item>
          <el-form-item label="所属行业"><el-input v-model="form.industry" placeholder="无" style="width: 100%;" clearable size="small" :readonly="status" /></el-form-item>
          <el-form-item label="注册类型"><el-input v-model="form.registrationType" placeholder="无" style="width: 100%;" clearable size="small" :readonly="status" /></el-form-item>
          <el-form-item label="企业规模" prop="enterpriseScale">
            <el-select v-model="form.enterpriseScale" placeholder="无" style="width: 100%" clearable size="small" :disabled="status">
              <el-option v-for="(item, index) in scaleOptions" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属区域" prop="area">
            <el-cascader
              v-model="area"
              :options="areaOptions"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childern'
              }"
              style="width: 100%;"
              placeholder="无"
              clearable
              size="small"
              :disabled="status"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="注册地址" prop="registeredAddress">
            <el-input v-model="form.registeredAddress" placeholder="无" style="width: 100%;" clearable size="small" :readonly="status" />
          </el-form-item>
          <!-- <el-form-item label="注册地址" prop="registeredAddress">
            <SelectAddress
              ref="selectAddress"
              :provinceValue="regidAddressV.provinceValue"
              :cityValue="regidAddressV.cityValue"
              :areaValue="regidAddressV.areaValue"
              @getValue="getRegiAddress"
            />
          </el-form-item> -->
          <el-form-item label="主营业务" prop="business">
            <el-input
              v-model="form.business"
              type="textarea"
              placeholder="无"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
              :readonly="status"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简介" prop="introduction">
            <el-input
              v-model="form.introduction"
              type="textarea"
              placeholder="无"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
              :readonly="status"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="!status"><el-button type="primary" style="width: 88%;" @click="onSubmit">保存</el-button></el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data';
import SelectAddress from '@/components/SelectAddress';
import { getCompanyInfo, updateCompanyInfo } from '@/api/manageInformation/baseInfo';
import { getSpecificArea } from '@/api/system/user';

export default {
  name: 'BaseInfo',
  components: {
    SelectAddress
  },
  data() {
    return {
      // 当前用户的公司id
      companyManagerId: undefined,

      // 当前是否可以进行修改
      isEdit: true,
      status: true,

      // 所属区域存储
      area: [],
      // 省市区三级联动选项
      areaOptions: [],

      // 表单
      form: {
        companyName: undefined,
        creditCode: undefined,
        industry: undefined,
        registrationType: undefined,
        enterpriseScale: undefined,
        area: [],
        registeredAddress: undefined,
        business: undefined,
        introduction: undefined
      },

      // 企业规模
      scaleOptions: [
        {
          label: '无',
          value: null
        },
        {
          label: '0-100人',
          value: 0
        },
        {
          label: '100-200人',
          value: 1
        },
        {
          label: '200-500人',
          value: 2
        },
        {
          label: '500人以上',
          value: 3
        }
      ],

      // 省市区三级联动
      regidAddressV: {
        provinceV: '',
        cityV: '',
        areaV: ''
      }
    };
  },
  mounted() {
    // Object.keys(this.form).forEach((val, key) => {
    //   if (this.form[val] == null || this.form[val] == undefined) {
    //     this.form[val] = '无';
    //   }
    // });

    // 获取用户id
    this.companyManagerId = this.$store.state.user.companyId;

    // 获取到省市区信息以后 再开始赋值
    this.getSpecificAreaFun().then(() => {
      // 如果存在用户id则进行用户信息获取
      if (this.companyManagerId) {
        this.isEdit = true;
        getCompanyInfo(this.companyManagerId).then(res => {
          this.form = res.data;
          this.form.enterpriseScale = Number(this.form.enterpriseScale);
          if (this.form.area) {
            // 将返回的数组重新转换为number类型 防止数据无法还原
            this.area = this.form.area.split(',').map(Number);
          }
        });
      } else {
        this.isEdit = false;
      }
    });
  },
  methods: {
    /* 查询省市区信息 */
    getSpecificAreaFun() {
      return new Promise((resolve, reject) => {
        getSpecificArea().then(res => {
          this.areaOptions = [res.data];
          resolve();
        });
      });
    },
    // 省市区三级联动
    getRegiAddress(finalAddress) {
      let addressStr = JSON.stringify(finalAddress);
      this.form.area = addressStr;
    },

    /* 根据省市区三级联动变化获取数据 */
    handleChange(value) {},
    /* END */

    // 提交
    onSubmit() {
      let obj = JSON.parse(JSON.stringify(this.form));
      obj.area = this.area ? this.area.join(',') : this.area;
      updateCompanyInfo(JSON.stringify(obj)).then(response => {
        this.isEdit = true;
        this.status = true;
        getCompanyInfo(this.companyManagerId).then(res => {
          this.form = res.data;
          this.form.enterpriseScale = Number(this.form.enterpriseScale);
          this.area = this.form.area.split(',');
          this.msgSuccess('修改成功');
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  max-width: 100%;

  .title {
    position: relative;
    width: 100%;
    height: 3.75rem;
    line-height: 3.75rem;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
  }

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }

  .m-form-box {
    position: relative;
    padding-top: 1rem;
    width: 56%;
    margin: auto;

    .edit-btn {
      float: right;
      width: 6rem;

      &::after {
        clear: both;
      }
    }

    .m-form {
      margin-top: 2rem;
      display: flex;
      align-items: center;
      width: 100%;
    }
  }
}

/** 修改表单内无法修改时的样式 */
::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #dfe4ed;
  color: #333;
  /* border: 0; */
}

/* 当前如果是无法点击的状态修改表单的样式 */
.form-disabled {
  ::v-deep .el-input__inner {
    border: 0;
  }

  ::v-deep input::-webkit-input-placeholder,
  ::v-deep textarea::-webkit-input-placeholder,
  ::v-deep .el-cascader__search-input {
    color: #666;
  }
  ::v-deep input::-moz-input-placeholder,
  ::v-deep textarea::-moz-input-placeholder {
    color: #666;
  }
  ::v-deep input::-ms-input-placeholder,
  ::v-deep textarea::-ms-input-placeholder {
    color: #666;
  }

  ::v-deep .el-input__suffix {
    display: none;
  }

  ::v-deep .el-textarea__inner {
    margin-top: 0.2rem;
    border: 0;
    resize: none;
  }

  ::v-deep .el-upload {
    display: none;
  }

  .el-upload__tip {
    margin-left: 0.7rem;
    margin-top: 0.785rem;
  }
}
</style>
